export const soundCode: { [key: string]: string } = {
  v2: `
  // vue2 模拟 Vue的data
  let data = {
    msg: ''
  }

  // 模拟 Vue 实例
  let vm = {

  }

  Object.defineProperty(vm, 'msg', {
    // 获取数据
    get() {
      return data.msg
    },
    // 给vue实列设置属性和值
    set(newValue) {
      // 值一样不更新
      if (newValue === data.msg) return
      // 2.data.msg更新
      data.msg = newValue
    }
  })

  // 监听输入框输入事件
  const onInput = () => {
    var x = document.querySelector('#ipt1')
    // 1、vm.msg值被检测到变化后,更新data.msg
    vm.msg = x.value
    // 3、在div节点上显示
    document.getElementById('vue2span').innerHTML = data.msg;
  }`,
  v3: `
  // vue3
  let data2 = {
    msg: ''
  }

  let vm2 = new Proxy(data2, {
    get(target, key) {
      return target[key]
    },
    set(target, key, newValue) {
      if (target[key] === newValue) return
      // 2.data的属性更新了
      target[key] = newValue
    }
  })
  
  // 监听输入框输入事件
  const onInput = () => {
    var x = document.querySelector('#ipt2')
    // 1、vm.msg值被检测到变化后, proxy代理根据变化更新data
    data2.msg = x.value
    // 3.页面上值的被更新
    document.getElementById('vue3span').innerHTML = vm2.msg
  }`
}
